<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>08_行高注意事项</title>
    <style>
      /* 
        1.多行文字全部叠在了一起，行高不够，导致文字重叠
        2.背景颜色没了，因为你设置了line-height为0，又没有写height，所以高度为0，你高度都没有，自然不会有背景色
        3.行高不够，文字会超出盒子，文字顶部被吃掉了
         */
      div {
        font-size: 40px;
        background-color: orange;
        line-height: 60px;
      }

      /* 
      注意点1: 行高是可以被继承的
      注意点2: 行高过小会怎么样？ -- 文字重叠且最小值是0，不能为负数
      注意点3: line-height 和 height是什么关系？
            ###如果设置了height就以height为准，如果没有设置height就以line-height为准
       行高应用场景1:多行调整相互之间的高度
       单行应用场景1:垂直居中，让height和line-height一样即可
       */
    </style>
  </head>
  <body>
    <div>
      尚硅谷让天下没有难学的技术尚硅谷让天下没有难学的技术尚硅谷让天下没有难学的技术尚硅谷让天下没有难学的技术尚硅谷让天下没有难学的技术尚硅谷让天下没有难学的技术
    </div>
  </body>
</html>
